<template>
  <div >
    <div class="out_container">
      <div class="container">
        <div class="logo">
          <img src="./images/logo1.png" alt="图片" />
        </div>
        <p class="signIn">Please sign in</p>
        <div class="info">
          <input
            type="text"
            class="userName"
            placeholder="Username"
            ref="userName"
            @change="getUserName"
          />
          <input
            type="password"
            class="password"
            placeholder="Password"
            ref="Password"
            @change="getPassword"
          />
          <input type="checkBox" class="checkBox" /> Remember me
          <button class="button" @click="login">Sign in</button>
        </div>
        <div class="bottom">©2022</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      userName: "", //用户的登录名
      password: "", //用户的密码
      welcome: false, //是否先经过Welcome页面
    };
  },
  mounted() {
    // 当组件挂载的时候就发请求获取mock/user.json中已有的用户数据
    this.$store.dispatch("getUserLogin");
    this.$bus.$on("Welcome",data=>{
      this.welcome=data;
    })
  },

  methods: {
    // 获取用户的登录userName
    getUserName() {
      this.userName = this.$refs.userName.value + "";
    },
    // 获取用户的登录密码
    getPassword() {
      this.password = this.$refs.Password.value + "";
    },
    // 用户点击登录，对其信息进行验证
    login() {
      // 验证用户的登录信息与仓库中保存的用户信息是否匹配
      this.userLogin.map((ele) => {
        if (!this.userName) this.$alert("请输入用户名");
        else if (!this.password) this.$alert("密码错误");
        else if (ele.userName != this.userName)
          this.$alert("用户名错误，请重新输入");
        else if (ele.password != this.password)
          this.$alert("密码错误，请重新输入");
        else if (
          ele.userName == this.userName &&
          ele.password == this.password
        ) {
          this.$alert("登录成功", {
            confirmButtonText: "确定",
            callback: () => {
              this.$router.push("/"); //登录成功之后跳到首页
              // 验证成功之后通知父组件App.vue
              this.$bus.$emit("LoginSuccess", this.userName);
            },
          });
        }
      });
    },
  },
  watch: {
    welcom() {
      this.$router.push("/login");
    },
  },
  computed: {
    ...mapState({
      userLogin: (state) => state.user.userLogin,
    }),
  },
};
</script>

<style lang="less" scoped>
/* .top {
  background-color: rgba(135, 206, 235, 0.3);
  padding-top: 15px;
  padding-left: 45px;
  opacity: 0.6;
  .zhm_logo {
    font-size: 40px;
    font-weight: bold;
    font-family: STXingkai;
    text-decoration: none;
    background-image: -webkit-linear-gradient(right, #e95e1e, #4876f5, #0b9fb9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
} */
.out_container {
  position: relative;
  display: flex;
  height: 600px;
  top: 60px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  .container {
    width: 320px;
    /* 高度不设问题不大 */
    height: 550px;
    overflow: hidden;
    /* 设置其内部的文字居中 */
    text-align: center;
    .logo {
      width: 80px;
      height: 120px;
      /* 设置图片居中 */
      margin: 0 auto;
      img {
        width: 100%;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }
    .signIn {
      margin: 20px 0;
      font: 900 30px "";
      letter-spacing: 2px;
    }
    .userName,
    .password {
      display: block;
      width: 100%;
      font: 900 18px "";
      margin-bottom: 20px;
      padding: 10px;
      border: 0;
      border-bottom: 2px solid #000;
      /* 设置元素周围的轮廓，绘制于元素周围的一条线，否则表单输入值的时候会显示边框*/
      outline: none;
      // 设置用户名的字体样式
      text-decoration: none;
      background-image: -webkit-linear-gradient(
        right,
        #e95e1e,
        #4876f5,
        #0b9fb9
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .button {
      display: block;
      background-image: linear-gradient(to left, #fd79a8, #a29bfe);
      height: 48px;
      width: 180px;
      border-radius: 20px;
      margin-left: 70px;
      margin-top: 20px;
      text-align: center;
      font: 900 20px "";
    }
    .bottom {
      background-color: rgba(135, 206, 235, 0);
      margin-left: -40px;
    }
  }
}
</style>